<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 封装时没有思路 先写全部整体 ，再将其可更替值替换为变量
    // ajax -- function --参数  -- 替换  --  可变值
    // var xhr = new XMLHttpRequest();
    // xhr.open("请求方式", "请求地址", "是否异步")
    // xhr.send();
    // xhr.onreadystatechange = function () {
    //     // =4 ajax 进行到第四步   =200 http协议 请求成功
    //     if (xhr.readyState == 4 && xhr.status == 200) {
    //         console.log(xhr.responseText)
    //     }
    // }


    // 回调的写法封装ajax
    function ajax(type, url, success) {
        // ajax请求流程
        var xhr = new XMLHttpRequest();
        xhr.open(type, url, true)
        xhr.send();
        xhr.onreadystatechange = function () {
            // =4 ajax 进行到第四步   =200 http协议 请求成功
            if (xhr.readyState == 4 && xhr.status == 200) {
                success(xhr.responseText)
            }
        }
        //**
    }

    ajax("GET", "./1.json", function (data) {
        console.log(data)
        if (data.name) {
            ajax("GET", "./2.json", function (data) {
                console.log(data)
            })
        } else {
            alert('上号兄嘚')
        }

    })


    // Promise的写法封装ajax
    function ajax(type, url, success) {

        let p = new Promise(function (resolve, reject) {

            var xhr = new XMLHttpRequest();
            xhr.open(type, url, true)
            xhr.send();
            xhr.onreadystatechange = function () {
                // =4 ajax 进行到第四步   =200 http协议 请求成功
                if (xhr.readyState == 4 && xhr.status == 200) {
                    resolve(xhr.responseText)
                }
            }
        })
        // 一定需要 return
        return p
    }
    // 请求第一次 得到之后return 再请求第二次
    ajax("GET", "1.json")
        .then(function (data) {
            console.log(data)
            return ajax("GET", "2.json")
        })
        .then(function (data) {
            console.log(data)
        })
        .catch(function () {
            console.log("地址错误")
        })
        .finally(function () {
            console.log("无论成功失败都会执行")
        })

    let a = ajax("GET", "1.json")
    let b = ajax("GET", "2.json")
    // 合并
    Promise.all([a, b])
        .then(function (d) {
            console.log(d)
        })
    // 竞争
    Promise.race([a, b])
        .then(function (d) {
            console.log(d)
        })

    // 确定结果为成功时，转成pormise时
    var p2 = Promise.resolve(["11", "22"])
    p2.then((data) => {
        console.log(data)
    })




</script>

</html>